<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<head>
    <title>Geocoding with GMap v3</title>
    <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
	<script type="text/javascript" src="./resources/googleAPI.js"></script>
    <script type="text/javascript" src="./resources/jquery.js"></script>
	<script type="text/javascript" src="./resources/jquery-ui-1.8.12.custom.min.js"></script>
	<link href="./resources/jquery-ui-1.8.12.custom.css" rel="stylesheet" type="text/css" />
	<script type="text/javascript">
	var geocoder;
	var marker;
	function initialize(){
		//MAP
		 var getTraffic = ""; //traffy or google
		geocoder = new google.maps.Geocoder();
		createMap(13.75055703, 100.52318573, "map_canvas", getTraffic);
		        
		  marker = new google.maps.Marker({
		    map: map,
		    draggable: true
		  });
		  $("#address").autocomplete({
		      //This bit uses the geocoder to fetch address values
		      source: function(request, response) {
		        geocoder.geocode( {'address': request.term }, function(results, status) {
		          response($.map(results, function(item) {
		            return {
		              label:  item.formatted_address,
		              value: item.formatted_address,
		              latitude: item.geometry.location.lat(),
		              longitude: item.geometry.location.lng()
		            }
		          }));
		        })
		      },
		      //This bit is executed upon selection of an address
		      select: function(event, ui) {
		        $("#latitude").val(ui.item.latitude);
		        $("#longitude").val(ui.item.longitude);
		        var location = new google.maps.LatLng(ui.item.latitude, ui.item.longitude);
		        marker.setPosition(location);
		        map.setCenter(location);
		      }
		    });              
	}
	
		  
	</script>
  </head>
  <body onload="initialize()">
    <label>Address: </label><input id="address"  type="text"/>
    <div id="map_canvas" style="width:300px; height:300px"></div><br/>
    <label>latitude: </label><input id="latitude" type="text"/><br/>
    <label>longitude: </label><input id="longitude" type="text"/>
  </body>
</html>